<!-- 头部 -->
<template>
  <div :id="isHome?'isHome':'isNews'" :class="hdBgc?'hdBgc header-box flex':'header-box flex'">
    <div class="logo pointer" @click="goToHome">
      <img :src="logoImg" class="img-balck">
      <img :src="logoImgW" alt="" srcset="" class="img-whiter">
    </div>

    <div class="hd_rt flex">
      <div class="user">
        <!-- <span class="sign pointer" @click="handlePush('/login?type=login')">登录</span> -->
        <!-- <span class="sign pointer" @click="open3ydta">登录</span> -->
      </div>
      <!-- <span class="iconfont icon-menu2 img" @click="drawer=true"></span> -->
    </div>

    <el-drawer title="我是标题" :visible.sync="drawer" direction="rtl" size="90%" class="header-modal" :append-to-body="true">
      <div slot="title">
        <img :src="logoImg" alt="" srcset="">
      </div>
      <div class="nav">
        <div :class="isHome?'cell active':'cell'" @click="isHome?drawer=false:goHome()">
          <!-- <img src="../../assets/images/homepage/home.svg"> -->
          <span class="iconfont icon-home"></span>

          <span>首页</span>
        </div>
        <div :class="isHome?'cell':'cell active'" @click="!isNews?goNews():drawer=false">
          <!-- <img src="../../assets/images/homepage/news.svg"> -->
          <span class="iconfont icon-news"></span>
          <span>新闻中心</span>
          <i>new</i>
        </div>
        <div class="line"></div>
      </div>

    </el-drawer>
  </div>
  <!--  <div :id="isHome?'isHome':'isNews'" :class="[hdBgc?'headerbgc header ':'header ']" style="max-width: 100vw;position: fixed;z-index: 9999;min-width: 1200px;">
    <div v-if="isHome" class="bg-box"></div>
    <div class="flex hd-layout">
      <div class="hd_left">
        <div class="logo pointer" @click="goToHome">
          <img :src="isHome?logoImg:logoImgW" alt="" srcset="">
        </div>
        <p class="logo-sec webfont-Medium">让广告投其所好</p>
        <div class="route-box flex">
          <template v-if="isHome">
            <p class="webfont-Medium active">首页</p>
            <p class="webfont-Medium" @click="goNews">新闻中心</p>
          </template>
          <template v-else>
            <p class="webfont-Medium " @click="goHome">首页</p>
            <p class="webfont-Medium active">新闻中心</p>
          </template>

        </div>
      </div>

      <div class="hd_rt">
        <div v-if="!tkshow" class="user">
          <span class="sign pointer" @click="handlePush('/login?type=login')">登录</span>
          <span class="sign up pointer" @click="handlePush('/login?type=register')">注册</span>
        </div>
        <div v-else class="user">
          <span class="sign pointer" @click="intoPlat">进入投放平台</span>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  mapActions
} from 'vuex'
import {
  getToken
} from '@/utils/auth.js'
import {
  getDefultPath
} from '@/utils/index.js'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据

    return {
      /* pushDis:false, */
      drawer: false,
      hdBgc: false,
      isHome: true,
      logoImg: require('@/assets/images/base/logoBule.svg'),
      logoImgW: require('@/assets/images/base/newLogoBig.svg'),
      // 国旗
      icon: 'icon-flag-us', // 选择的国旗
      // banner: this.$store.state.iconFlag.icon.zhCN, // 全部国旗
      input: '',
      input1: '',
      rg: true,
      // 黑夜/白天
      sky: false,
      day: require('@/assets/images/icon/day.png'),
      night: require('@/assets/images/icon/night.png'),
      language: [{
        name: 'Message.Simplified_Chinese',
        img: '/static/img/图层 1@2x.9842364a.png',
        icon: 'icon-flag-cn'
      },
      {
        name: 'Message.traditional_Chinese',
        img: '',
        icon: 'icon-flag-tw'
      },
      {
        name: 'Message.English',
        img: '',
        icon: 'icon-flag-us'
      },
      {
        name: 'Message.Japanese',
        img: '',
        icon: 'icon-flag-jp'
      },
      {
        name: 'Message.Korean',
        img: '',
        icon: 'icon-flag-kr'
      }
      ],
      value: '',
      show: false,
      lgimg: '/static/img/图层 1@2x.9842364a.png',
      // lgname: this.$t('Message.Simplified_Chinese'),
      tkshow: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.tkshow = getToken()
    const lang = localStorage.getItem('lang')
    // if (lang !== null) {
    //   this.handleCommand2(JSON.parse(lang))
    //   this.$store.state.selfHelp = JSON.parse(lang)
    // }
    // 在页面刷新时将vuex里的信息保存到localStorage里
    // window.addEventListener('beforeunload', () => {
    //   localStorage.setItem('lang', JSON.stringify(this.$store.state.iconFlag.lang))
    // })
    if (this.$route.path === '/home') {
      this.isHome = true
    } else {
      this.isHome = false
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 监听浏览器滚动
    const that = this
    document.documentElement.scrollTop = 0
    window.addEventListener('scroll', function(event) {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 80) {
        that.hdBgc = true
      } else {
        that.hdBgc = false
      }
    })
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener('scroll', function() {})
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    open3ydta() {
      window.open('https://login.3ydata.com/')
    },
    goToHome() {
      const path = this.$route.path
      if (path !== '/home') {
        this.goHome()
      }
    },
    goHome() {
      this.$router.replace({
        path: '/home'
      })
    },
    goNews() {
      this.$router.replace({
        path: '/news-list'
      })
    },
    handlePush(path) {
      /*  const newBridge = document.getElementById('newBridge')
                      if (!newBridge) return false */
      this.$router.push({
        path
      })
    },

    async intoPlat() {
      /* const newBridge = document.getElementById('newBridge')
                    if (!newBridge) return false */

      const userInfo = this.$store.state.user.userInfo
      const length = Object.keys(userInfo).length

      if (length && userInfo.roleName) {
        const path = getDefultPath(userInfo.roleName)
        this.$router.replace({
          path
        })
      } else {
        const userInfo = await this.$store.dispatch('user/getInfo')
        const path = getDefultPath(userInfo.roleName)
        this.$router.replace({
          path
        })
      }
    }

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  @import "~@/styles/variables.scss";

  .header-box {
    position: fixed;
    width: 100vw;
    padding: 0.92rem 1.371rem;
    top: 1.5rem;
    left: 0;
    z-index: 11;

    .logo {
      height: 1.029rem;
      width: auto;

      img {
        height: 100%;
        width: auto;
      }
    }

    .hd_rt {
      justify-content: flex-end;

      .sign {
        display: block;
        width: 3.886rem;
        height: 1.714rem;
        margin-right: 1.2rem;
        text-align: center;
        background: transparent;
        font-size: 0.686rem;
        line-height:  1.714rem;
        letter-spacing: 0.011rem;
        border-radius: 4px;
        border: 1px solid rgba(172, 182, 194, 1);
        box-sizing: border-box;

      }

      .img {
        font-size: 1.2rem;

      }
    }
  }
#isHome .img-whiter{display: none;}
#isNews .img-balck{display: none;}
#isHome.hdBgc .img-whiter{display: block;}
#isHome.hdBgc .img-balck{display: none;}

#isHome.hdBgc .sign{
  color: #FFFFFF;
  border-color: #FFFFFF;
}

#isHome .icon-menu2{
  color: #15C5CE;
}
#isHome.hdBgc .icon-menu2,
.icon-menu2{
  color: #FFFFFF;
}
  .hdBgc.header-box {
    top: 0;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.11);
  }

  #isHome.hdBgc.header-box {
    background-color: rgba(0, 0, 0, 0.89) !important;
  }

  #isNews.hdBgc.header-box {
    background-color: rgba(0, 0, 0, 0.89) !important;
  }

  .header-modal {
    z-index: 2004;

    ::v-deep .el-icon-close {
      display: none;
    }

    ::v-deep.el-drawer__header {
      padding-top: 3.439rem;
      padding-bottom: 0.66rem;
      border-bottom: 1px solid rgba(232, 234, 237, 1);
      margin-bottom: 0.9rem;

      img {
        height: 1.029rem;
        width: auto;
      }
    }

    .nav {
      padding-top: 0.5rem;

      .cell {
        display: flex;
        padding-left: 2.743rem;
        align-items: center;
        margin-bottom: 0.43rem;
        color: rgba(51, 64, 74, 0.8);
        height: 2.743rem;

        font-weight: 500;
        font-size: 0.8rem;
        line-height: 0.743rem;

        span {
          width: auto;
          text-align: left;
          margin-left: 0.4rem;
        }

        .iconfont {
          font-size: 1.23rem;
          margin-left: 0.1rem;
        }

        i {
          margin: 0 1.3rem 0 auto;
          width: 2.514rem;
          height: 0.914rem;
          color: #FFFFFF;
          font-size: 0.686rem;
          text-align: center;
          line-height: 0.914rem;
          border-radius: 4rem;
          background: rgba(21, 197, 206, 1);
        }

        &.active {
          color: rgba(21, 197, 206, 1);
          margin-right: 0.45rem;
          border-radius: 0rem 2.857rem 2.857rem 0rem;
          background: rgba(21, 197, 206, 0.1);

        }
      }
    }

    .line {
      margin-top: 0.8rem;
      height: 1px;
      background: rgba(232, 234, 237, 1);
      margin-left: 2.3rem;
    }
  }

  #isNews .sign {
    color: #FFFFFF;
    border-color: rgba(172, 182, 194, 1);

  }
</style>
